<template>
  <div class="over-all-deployment-plan">
    <div class="content-container">
      <div class="naviga"><span>新产品上市计划&nbsp;>  </span><span class="setColor">整体部署规划</span></div>
      <div class="mainPage">
        <div class="whiteContainer boederSet" style="margin: 6px 12px;">
          <div class="selecte-container">
            <div class="selecte-item space-between"  v-show="searchVisible == 0">
              <div class="selecte-part">
                <el-form :inline="true" :model="deploySearchParam" class="demo-form-inline" size="mini">
                  <el-form-item label="品类">
                    <el-select class="selectFont" v-model="deploySearchParam.category" placeholder="品类" @change="categoryChange">
                      <el-option class="selectFont"  v-for="(item,index) in deploySetParam.categoryList" :label="item" :value="item" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="型号">
                    <el-select class="selectFont"  v-model="deploySearchParam.productCode" placeholder="型号" @change="setCodeByChange">
                      <el-option  class="selectFont" v-for="(item,index) in deploySetParam.productCodeList" :label="item" :value="item" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="部署规划状态">
                    <el-select class="selectFont"  v-model="deploySearchParam.isPlan" placeholder="部署规划状态">
                      <el-option class="selectFont"  label="全部" value="90"></el-option>
                      <el-option  class="selectFont" label="已规划" value="0"></el-option>
                      <el-option  class="selectFont" label="未规划" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
              <div class="selecte-part">
                <el-button style="font-weight: bold" type="text" @click="onSubmitSwitchInit(1)">查询型号</el-button>
              </div>
            </div>
            <div class="selecte-item space-between" v-show="searchVisible == 1">
              <div class="selecte-part">
                <el-form :inline="true" :model="controlSetInit" class="demo-form-inline" size="small">
                  <el-form-item label="查询参数">
                    <el-select class="selectFont"  v-model="controlSetInit.controlBrand" placeholder="查询参数" style="width: 150px;">
                      <el-option  class="selectFont" label="产品型号" value="产品型号"></el-option>
                      <el-option class="selectFont"  label="产品名称" value="产品名称"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-input v-model="controlSetInit.controlProdCode" placeholder="请输入查询参数"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button style="font-weight: bold" type="primary" @click="onSubmitProdByCode(controlSetInit)">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="selecte-part">
                <el-button style="font-weight: bold" type="text" @click="onSubmitSwitchInit(0)">组合查询</el-button>
              </div>
            </div>
          </div>
          <div class="deployStateContainer">
            <el-table :data="deployState.deployStateCol" stripe
                      border class="setHeight" style="width: 100%">
              <el-table-column
                prop="productCode"
                label="产品型号">
              </el-table-column>
              <el-table-column
                prop="category"
                label="品类">
              </el-table-column>
              <el-table-column
                prop="productType"
                label="销售类型">
              </el-table-column>
              <el-table-column
                prop="rhythmPlanState"
                label="整体节奏规划状态">
              </el-table-column>
              <el-table-column
                label="部署规划状态">
                <template slot-scope="scope">
                  <span :style="{'color': scope.row.deployState == '已规划' ? '#05c459' : '#fc4162'}">{{scope.row.deployState}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="planDeployment(scope.row.productId)">规划部署</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationSet">
            <div class="pagination-container">
              <div class="toStart" @click="handleCurChange(1)">首页</div>
              <el-pagination background layout="prev, pager, next"
                             :current-page.sync="deployState.currentPage"
                             :total="deployState.totalRecord"
                             @current-change="handleCurChange">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  Dialog容器-->
    <div class="dialog-container">
    </div>
  </div>
</template>

<script>
  import * as opreate from 'api/getData'

  export default {
    name: "over-all-deployment-plan",
    data() {
      return {
        deployState:{
          deployStateCol:[],
          totalRecord: 0,
          currentPage: 0
        },
        deploySearchParam: {
          category: '全部',
          productCode: '全部',
          isPlan: "全部"
        },
        deploySetParam:{
          categoryList:[],
          productCodeList: []
        },
        controlSetInit:{
          controlBrand: '产品型号',
          controlProdCode: ''
        },
        searchVisible: 0
      }
    },
    mounted(){
      this.obtainInitState()
    },
    methods:{
      obtainInitState(){
        Promise.all([opreate.getCategoryListPlan(),opreate.getProdCodeListPlan({category: "全部"})]).then(fn => {
          this.deploySetParam = {
            categoryList:["全部",...fn[0].data],
            productCodeList: ["全部",...fn[1].data]
          }
        }).catch(err => {
          console.error(err)
        })
        this.obtainProdSearch(this.deploySearchParam)
      },
      categoryChange(category){
        opreate.getProdCodeListPlan({ category }).then(res => {
          let { data } = res
          if(data.length > 0){
            this.deploySetParam = Object.assign(this.deploySetParam, { productCodeList: ["全部",...data] })
            this.deploySearchParam = Object.assign(this.deploySearchParam, { productCode: '全部', isPlan: '全部' })
          }else {
            this.deploySetParam = Object.assign(this.deploySetParam, { productCodeList: [] })
            this.deploySearchParam = Object.assign(this.deploySearchParam, { productCode: '', isPlan: '全部' })
          }
        })
      },
      setCodeByChange(productCode){
        this.deploySearchParam = Object.assign(this.deploySearchParam, { isPlan: '全部' })
      },
      onSubmitProdByCode(controlSetInit) {
        let { controlBrand, controlProdCode, pageNum } = controlSetInit
        let searchParam = controlBrand == "产品型号" ? { pageNum, productCode: controlProdCode } : { pageNum, productName: controlProdCode }
        this.obtainProdSearch(searchParam)
      },
      obtainProdSearch(deploySearchParam){
        opreate.getProdResListPlan(deploySearchParam).then(res => {
          let { list,totalRecord, currentPage } = res.data || {}
          this.deployState = {
            deployStateCol:list || [],
            totalRecord: totalRecord || 0,
            currentPage: currentPage || 0
          }
        })
      },
      handleCurChange(pageNum){
        if(Boolean(this.searchVisible)){
          this.onSubmitProdByCode({ pageNum,...this.controlSetInit })
        }else {
          this.obtainProdSearch({ pageNum,...this.deploySearchParam })
        }
      },
      onSubmitSwitchInit(val){
        if(Boolean(val)){
          this.onSubmitProdByCode(this.controlSetInit)
        }else {
          this.obtainProdSearch(this.deploySearchParam)
        }
        this.searchVisible = val
      },
      planDeployment(productId){
        const { href } = this.$router.resolve({
          name: `deploymentPlanDetail`,
          params: {
            productId: productId
          }
        })
        window.open(href, '_blank')
      }
    },
    watch:{
      deploySearchParam:{
        deep: true,
        handler(newVal) {
          this.obtainProdSearch(newVal)
        }
      }
    }
  }
</script>

<style scoped>
  .selecte-container,.selecte-item{
    display: flex;
  }
  .selecte-container{
    margin: 6px 0;
  }
  .selecte-item{
    height: 40px;
    padding: 0 12px;
    align-items: center;
    flex: 1;
  }
</style>
